<template>
  <transition name="v-alert-fade">
    <div class="v-alert" :class="[typeClass]" v-show="visible">
      <i class="v-alert__icon" :class="[iconClass, isBigIcon]" v-if="showIcon"></i>
      <div class="v-alert__content">
        <span class="v-alert__title" :class="[isBoldTitle]" v-if="title">{{title}}</span>
        <p class="v-alert__description" v-if="description">{{description}}</p>
        <i class="v-alert__closebtn" :class="{'is-customed': closeText !== '', 'v-icon-close': closeText === ''}" v-show="closable" @click="close()">{{closeText}}</i>
      </div>
    </div>
  </transition>
</template>

<script>
  const TYPE_CLASSES_MAP = {
    success: 'v-icon-check',
    warning: 'v-icon-warning',
    error: 'v-icon-error',
  };
  export default {
    name: 'v-alert',
    props: {
      title: {
        type: String,
        default: '',
        required: true,
      },
      description: {
        type: String,
        default: '',
      },
      type: {
        type: String,
        default: 'info',
      },
      closable: {
        type: Boolean,
        default: true,
      },
      closeText: {
        type: String,
        default: '',
      },
      showIcon: {
        type: Boolean,
        default: false,
      },
      renderContent: Function,
    },
    data() {
      return {
        visible: true,
      };
    },
    methods: {
      close() {
        this.visible = false;
        this.$emit('close');
      },
    },
    computed: {
      typeClass() {
        return `v-alert--${this.type}`;
      },

      iconClass() {
        return TYPE_CLASSES_MAP[this.type] || 'v-icon-info';
      },

      isBigIcon() {
        return this.description ? 'is-big' : '';
      },

      isBoldTitle() {
        return this.description ? 'is-bold' : '';
      },
    },
  };
</script>
